<template>
  <div class="contentBox">
    <swiper :slides-per-view="1" :space-between="40" :modules="modules" :freeMode="true"
      :scrollbar="{ draggable: false }" @swiper="onSwiper" @slideChange="onSlideChange" @setTranslate="onSetTranslate"
      style="height: 100vh;">
      <swiper-slide class="sliderAll slider1">
        <h1 v-if="showState.active1" class="animate__animated animate__bounce">大观楼首屏</h1>

        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider2">
        <div v-if="showState.active2"
          class="slider2Nei animate__animated animate__fadeInDown animate__infinite myElement5s">
        </div>
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider3">
        <img v-if="showState.active3" class="slider3Nei animate__animated animate__fadeInRightBig myElement3s"
          src="../src/assets/3-2.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider4">
        <img v-if="showState.active4" class="slider4Nei animate__animated animate__jackInTheBox"
          src="../src/assets/4-2.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider5">
        <img v-if="showState.active5" class="slider5Nei animate__animated animate__fadeInUp"
          src="../src/assets/5-2.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider6">
        <div v-if="showState.active6"
          class="slider6Nei animate__animated animate__fadeIn animate__infinite myElement5s">
        </div>
        <img v-if="showState.active6" class="slider6NeiTitle animate__animated animate__fadeInUp"
          src="../src/assets/6-1.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider7">
        <div v-if="showState.active7" class="slider7Nei animate__animated animate__lightSpeedInRight">
        </div>
        <img v-if="showState.active7" class="slider7NeiTitle animate__animated animate__fadeInUp"
          src="../src/assets/7-1.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider8">
        <div v-if="showState.active8" class="slider8Nei animate__animated animate__bounceInDown">
          <!-- animate__fadeInDownBig -->
        </div>
        <img v-if="showState.active8" class="slider8NeiTitle animate__animated animate__fadeInUp"
          src="../src/assets/8-1.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider9">
        <div v-if="showState.active9" class="slider9Nei animate__animated animate__fadeInDown">
          <!-- animate__fadeIn animate__infinite myElement5s-->
        </div>
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider10">
        <div v-if="showState.active10" class="slider10Nei animate__animated animate__flipInY">
        </div>
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider11">
        <img v-if="showState.active11" class="slider11Nei animate__animated animate__jackInTheBox"
          src="../src/assets/11-2.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider12">
        <h1 v-show="showState.active12" class="animate__animated animate__bounce">大观楼12屏</h1>
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider13">
        <div v-if="showState.active13" class="slider13Nei animate__animated animate__lightSpeedInLeft">
        </div>
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider14">
        <img v-if="showState.active14" class="slider14Nei animate__animated animate__fadeInBottomLeft"
          src="../src/assets/14-2.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider15">
        <img v-if="showState.active15"
          class="slider15Nei animate__animated animate__fadeIn animate__infinite myElement3s"
          src="../src/assets/15-2.png" />
        <!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider16">大观楼16屏<!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider17">大观楼17屏<!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider18"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider19"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider20"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider21"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider22"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider23"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider24"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider25"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider26"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider27"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
      <swiper-slide class="sliderAll slider28"><!-- 卷轴 -->
        <img class="jzOne" src="../src/assets/JZ.jpg" />
        <img class="jzTwo" src="../src/assets/JZ.jpg" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { FreeMode, Scrollbar } from 'swiper/modules' //需要自定义的模块
import { Swiper, SwiperSlide } from 'swiper/vue';  //自定义引用 swiper 组件
import 'swiper/css';  //swiper 样式
import 'swiper/css/scrollbar'  //swiper滚动条延时

import 'animate.css';  //动画css

const modules = [FreeMode, Scrollbar]

// 初始一屏宽度
let onePieceSize = ref(0);
// 固定 50
let onePieceSizeFivth = 50;
// 三分之一
let onePieceSizeThird = 0;

// 滚动到的页
let activeIndex = 0;
// 滑动方向
let offsetDirection = ref('next');
// 滑动距离
let currentOffset = ref(0);

let showState = reactive({
  active1: true,
  active2: false,
  active3: false,
  active4: false,
  active5: false,
  active6: false,
  active7: false,
  active8: false,
  active9: false,
  active10: false,
  active11: false,
  active12: false,
  active13: false,
  active14: false,
  active15: false,
  active16: false,
  active17: false,
  active18: false,
  active19: false,
  active20: false,
  active21: false,
  active22: false,
  active23: false,
  active24: false,
  active25: false,
  active26: false,
  active27: false,
  active28: false,
});

// 定义事件处理函数  
const onSwiper = (swiper) => {
  onePieceSize = swiper.size
  onePieceSizeThird = swiper.size / 2
  // console.log('onSwiper', swiper, onePieceSize, onePieceSizeThird);  
};

const onSlideChange = (swiper) => {
  // console.log('slideChange', swiper);  
  activeIndex = swiper.realIndex; // 使用 realIndex 获取实际滑块的索引

  // offsetDirection = swiper.touchesDirection
  // currentOffset = Math.abs(swiper.translate); // 注意：对于水平滑动，使用 swiperInstance.translateX 可能更准确（取决于 Swiper 版本）  
  // // console.log('滑动距离-2', currentOffset);
  // changeState() 
};

// 为swiper包装器设置自定义css3转换的translate值
// 得到滑动距离
const onSetTranslate = (swiper, translate) => {
  // Swiper 的 setTranslate 事件可能不会直接暴露给外部，  
  // 但你可以通过 swiperInstance.translate 直接访问最新偏移量  
  // 这里我们假设此方法作为示例，实际使用中可能需要根据 Swiper 版本调整  
  // 如果 setTranslate 事件可用，它可能会传递新的偏移量作为参数  
  offsetDirection = swiper.touchesDirection
  currentOffset = Math.abs(translate || 0); // 注意：这里的 translate.x 取决于你的 Swiper 配置（水平或垂直滑动） 
  // console.log('滑动距离-1', currentOffset);
  changeState()
};

const changeState = () => {
  // 往后触摸滑动
  if (offsetDirection == 'next') {
    console.log('后');

    if (0 <= currentOffset && currentOffset < (onePieceSize * 1 - onePieceSizeFivth)) {
      showState.active1 = true
    } else {
      showState.active1 = false
    }

    if ((onePieceSize * 1 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 2 - onePieceSizeFivth)) {
      showState.active2 = true
    } else {
      showState.active2 = false
    }

    if ((onePieceSize * 2 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 3 - onePieceSizeFivth)) {
      showState.active3 = true
    } else {
      showState.active3 = false
    }

    if ((onePieceSize * 3 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 4 - onePieceSizeFivth)) {
      showState.active4 = true
    } else {
      showState.active4 = false
    }

    if ((onePieceSize * 4 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 5 - onePieceSizeFivth)) {
      showState.active5 = true
    } else {
      showState.active5 = false
    }

    if ((onePieceSize * 5 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 6 - onePieceSizeFivth)) {
      showState.active6 = true
    } else {
      showState.active6 = false
    }

    if ((onePieceSize * 6 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 7 - onePieceSizeFivth)) {
      showState.active7 = true
    } else {
      showState.active7 = false
    }

    if ((onePieceSize * 7 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 8 - onePieceSizeFivth)) {
      showState.active8 = true
    } else {
      showState.active8 = false
    }

    if ((onePieceSize * 8 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 9 - onePieceSizeFivth)) {
      showState.active9 = true
    } else {
      showState.active9 = false
    }

    if ((onePieceSize * 9 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 10 - onePieceSizeFivth)) {
      showState.active10 = true
    } else {
      showState.active10 = false
    }

    if ((onePieceSize * 10 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 11 - onePieceSizeFivth)) {
      showState.active11 = true
    } else {
      showState.active11 = false
    }

    if ((onePieceSize * 11 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 12 - onePieceSizeFivth)) {
      showState.active12 = true
    } else {
      showState.active12 = false
    }

    if ((onePieceSize * 12 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 13 - onePieceSizeFivth)) {
      showState.active13 = true
    } else {
      showState.active13 = false
    }

    if ((onePieceSize * 13 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 14 - onePieceSizeFivth)) {
      showState.active14 = true
    } else {
      showState.active14 = false
    }

    if ((onePieceSize * 14 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 15 - onePieceSizeFivth)) {
      showState.active15 = true
    } else {
      showState.active15 = false
    }

    if ((onePieceSize * 15 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 16 - onePieceSizeFivth)) {
      showState.active16 = true
    } else {
      showState.active16 = false
    }

    if ((onePieceSize * 16 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 17 - onePieceSizeFivth)) {
      showState.active17 = true
    } else {
      showState.active17 = false
    }

    if ((onePieceSize * 17 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 18 - onePieceSizeFivth)) {
      showState.active18 = true
    } else {
      showState.active18 = false
    }

    if ((onePieceSize * 18 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 19 - onePieceSizeFivth)) {
      showState.active19 = true
    } else {
      showState.active19 = false
    }

    if ((onePieceSize * 19 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 20 - onePieceSizeFivth)) {
      showState.active20 = true
    } else {
      showState.active20 = false
    }

    if ((onePieceSize * 20 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 21 - onePieceSizeFivth)) {
      showState.active21 = true
    } else {
      showState.active21 = false
    }

    if ((onePieceSize * 21 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 22 - onePieceSizeFivth)) {
      showState.active22 = true
    } else {
      showState.active22 = false
    }

    if ((onePieceSize * 22 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 23 - onePieceSizeFivth)) {
      showState.active23 = true
    } else {
      showState.activ23 = false
    }

    if ((onePieceSize * 23 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 24 - onePieceSizeFivth)) {
      showState.active24 = true
    } else {
      showState.active24 = false
    }

    if ((onePieceSize * 24 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 25 - onePieceSizeFivth)) {
      showState.active25 = true
    } else {
      showState.active25 = false
    }

    if ((onePieceSize * 25 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 26 - onePieceSizeFivth)) {
      showState.active26 = true
    } else {
      showState.active26 = false
    }

    if ((onePieceSize * 26 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 27 - onePieceSizeFivth)) {
      showState.active27 = true
    } else {
      showState.active27 = false
    }

    if ((onePieceSize * 27 - onePieceSizeFivth) <= currentOffset && currentOffset < (onePieceSize * 28)) {
      showState.active28 = true
    } else {
      showState.active28 = false
    }
  } else if (offsetDirection == 'prev') { // 往前触摸滑动
    console.log('前');
    if (0 <= currentOffset && currentOffset < (onePieceSize * 1 - onePieceSizeThird)) {
      showState.active1 = true
    } else {
      showState.active1 = false
    }

    if ((onePieceSize * 1 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 2 - onePieceSizeThird)) {
      showState.active2 = true
    } else {
      showState.active2 = false
    }

    if ((onePieceSize * 2 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 3 - onePieceSizeThird)) {
      showState.active3 = true
    } else {
      showState.active3 = false
    }

    if ((onePieceSize * 3 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 4 - onePieceSizeThird)) {
      showState.active4 = true
    } else {
      showState.active4 = false
    }

    if ((onePieceSize * 4 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 5 - onePieceSizeThird)) {
      showState.active5 = true
    } else {
      showState.active5 = false
    }

    if ((onePieceSize * 5 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 6 - onePieceSizeThird)) {
      showState.active6 = true
    } else {
      showState.active6 = false
    }

    if ((onePieceSize * 6 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 7 - onePieceSizeThird)) {
      showState.active7 = true
    } else {
      showState.active7 = false
    }

    if ((onePieceSize * 7 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 8 - onePieceSizeThird)) {
      showState.active8 = true
    } else {
      showState.active8 = false
    }

    if ((onePieceSize * 8 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 9 - onePieceSizeThird)) {
      showState.active9 = true
    } else {
      showState.active9 = false
    }

    if ((onePieceSize * 9 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 10 - onePieceSizeThird)) {
      showState.active10 = true
    } else {
      showState.active10 = false
    }

    if ((onePieceSize * 10 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 11 - onePieceSizeThird)) {
      showState.active11 = true
    } else {
      showState.active11 = false
    }

    if ((onePieceSize * 11 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 12 - onePieceSizeThird)) {
      showState.active12 = true
    } else {
      showState.active12 = false
    }

    if ((onePieceSize * 12 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 13 - onePieceSizeThird)) {
      showState.active13 = true
    } else {
      showState.active13 = false
    }

    if ((onePieceSize * 13 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 14 - onePieceSizeThird)) {
      showState.active14 = true
    } else {
      showState.active14 = false
    }

    if ((onePieceSize * 14 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 15 - onePieceSizeThird)) {
      showState.active15 = true
    } else {
      showState.active15 = false
    }

    if ((onePieceSize * 15 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 16 - onePieceSizeThird)) {
      showState.active16 = true
    } else {
      showState.active16 = false
    }

    if ((onePieceSize * 16 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 17 - onePieceSizeThird)) {
      showState.active17 = true
    } else {
      showState.active17 = false
    }

    if ((onePieceSize * 17 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 18 - onePieceSizeThird)) {
      showState.active18 = true
    } else {
      showState.active18 = false
    }

    if ((onePieceSize * 18 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 19 - onePieceSizeThird)) {
      showState.active19 = true
    } else {
      showState.active19 = false
    }

    if ((onePieceSize * 19 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 20 - onePieceSizeThird)) {
      showState.active20 = true
    } else {
      showState.active20 = false
    }

    if ((onePieceSize * 20 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 21 - onePieceSizeThird)) {
      showState.active21 = true
    } else {
      showState.active21 = false
    }

    if ((onePieceSize * 21 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 22 - onePieceSizeThird)) {
      showState.active22 = true
    } else {
      showState.active22 = false
    }

    if ((onePieceSize * 22 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 23 - onePieceSizeThird)) {
      showState.active23 = true
    } else {
      showState.activ23 = false
    }

    if ((onePieceSize * 23 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 24 - onePieceSizeThird)) {
      showState.active24 = true
    } else {
      showState.active24 = false
    }

    if ((onePieceSize * 24 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 25 - onePieceSizeThird)) {
      showState.active25 = true
    } else {
      showState.active25 = false
    }

    if ((onePieceSize * 25 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 26 - onePieceSizeThird)) {
      showState.active26 = true
    } else {
      showState.active26 = false
    }

    if ((onePieceSize * 26 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 27 - onePieceSizeThird)) {
      showState.active27 = true
    } else {
      showState.active27 = false
    }

    if ((onePieceSize * 27 - onePieceSizeThird) <= currentOffset && currentOffset < (onePieceSize * 28)) {
      showState.active28 = true
    } else {
      showState.active28 = false
    }
  }


}



</script>

<style scoped>
.contentBox {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}

/* 隐藏swiper滚动条css */
.contentBox .swiper ::v-deep .swiper-scrollbar {
  display: none;
}

.jzOne {
  height: 100%;
  width: auto;
  position: absolute;
  left: 0;
  top: 0;
}

.jzTwo {
  height: 100%;
  width: auto;
  position: absolute;
  right: 0;
  top: 0;
}

/* 自定义动画css */
.myElementOne {
  --animate-delay: 1s;
  /* 延迟1秒开始动画 */
}

​ .myElementTwo {
  --animate-repeat: infinite;
  /* 设置无限次重复动画 */
}

.myElement3s {
  --animate-duration: 3s;
}

.myElement5s {
  --animate-duration: 5s;
}

.myElement10s {
  --animate-duration: 10s;
}

.sliderAll {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


.slider2 {
  background-image: url(../src/assets/2.jpg);
  position: relative;
}

.slider2Nei {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(../src/assets/2-2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider3 {
  background-image: url(../src/assets/3.jpg);
  position: relative;
}

.slider3Nei {
  width: 18%;
  height: auto;
  position: absolute;
  right: 50%;
  top: 65%;
}

.slider4 {
  background-image: url(../src/assets/4.jpg);
  position: relative;
}

.slider4Nei {
  width: 7%;
  height: auto;
  position: absolute;
  left: 49%;
  bottom: 0%;
}

.slider5 {
  background-image: url(../src/assets/5.jpg);
  position: relative;
}

.slider5Nei {
  width: 30%;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
}

.slider6 {
  background-image: url(../src/assets/6.jpg);
  position: relative;
}

.slider6Nei {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(../src/assets/6-2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider6NeiTitle {
  width: 20%;
  height: auto;
  position: absolute;
  right: 6%;
  bottom: 3%;
}

.slider7 {
  background-image: url(../src/assets/7.jpg);
  position: relative;
}

.slider7Nei {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(../src/assets/7-2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider7NeiTitle {
  width: 20%;
  height: auto;
  position: absolute;
  right: 6%;
  bottom: 3%;
}

.slider8 {
  background-image: url(../src/assets/8.jpg);
  position: relative;
}

.slider8Nei {
  width: 30%;
  height: 50%;
  position: absolute;
  top: 8px;
  right: 21%;
  background-image: url(../src/assets/8-2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider8NeiTitle {
  width: 20%;
  height: auto;
  position: absolute;
  right: 6%;
  bottom: 3%;
}


.slider9 {
  background-image: url(../src/assets/9.jpg);
  position: relative;
}

.slider9Nei {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(../src/assets/9-2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


.slider10 {
  background-image: url(../src/assets/10.jpg);
  position: relative;
}

.slider10Nei {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(../src/assets/10-2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


.slider11 {
  background-image: url(../src/assets/11.jpg);
  position: relative;
}

.slider11Nei {
  width: 52%;
  height: auto;
  position: absolute;
  left: 25%;
  bottom: 11%;
}


.slider13 {
  background-image: url(../src/assets/13.jpg);
  position: relative;
}

.slider13Nei {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(../src/assets/13-2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


.slider14 {
  background-image: url(../src/assets/14.jpg);
  position: relative;
}

.slider14Nei {
  width: 54%;
  height: auto;
  position: absolute;
  left: 0%;
  bottom: 0%;
}


.slider15 {
  background-image: url(../src/assets/15.jpg);
  position: relative;
}

.slider15Nei {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0%;
  bottom: 0%;
}
</style>
